import React, { useEffect } from 'react'
import style from './index.module.scss'
import { Button, Cascader, Form, Input, Row, Select, Space, } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { updatePwd } from '@/store/actions/user'
import { RootState } from '@/interface/store'
import { user } from '@/interface/user'

export const SecuritySetting = () => {
    const dispatch = useDispatch()
    const { account } = useSelector((state: RootState) => state.user.user as user);
    useEffect(() => {
        console.log(12121);
    })
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    const onFinish = (values: any) => {
        console.log('Success:', values);
        const params = Object.assign(values, { account });
        console.log(params, 'values');
        dispatch(updatePwd(values))
    };

    return (
        <div className={style.root}>
            <Form
                name="basic"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 8 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="旧密码"
                    name="password"
                    rules={[{
                        required: true,
                        message: '请输入旧密码',
                    }]}
                >
                    <Input placeholder='请输入旧密码' />
                </Form.Item>
                <Form.Item
                    label="新密码"
                    name="newPassword"
                    hasFeedback
                    rules={[{
                        required: true,
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/,
                        message: '必须由数字、字母组成，长度在6~18位之间',
                    }]}
                >
                    <Input.Password placeholder='请输入新密码' />
                </Form.Item>
                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    hasFeedback
                    rules={[{
                        required: true,
                        message: '请再次输入新密码',
                    },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('newPassword') === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('两次密码输入不一致'));
                        },
                    }),
                    ]}
                >
                    <Input.Password placeholder='请在此输入密码' />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 2, span: 8 }}>
                    <Space size={12}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                        <Button type="default" htmlType="reset">
                            重置
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    )
}
